<!--
 * @Author: liaoxing
 * @Date: 2021-11-26 15:40:43
 * @LastEditors: liaoxing
 * @LastEditTime: 2022-03-21 15:09:37
 * @Description: liaoxing created
 * @FilePath: \pin-xin-admin\src\components\selectMemberTree\selectMemberTree.vue
-->
<template>
  <div class="selectMemberTree">
    <div class="nameBox flex more">
      <span>已选择人：</span>
      <p :title="strName" class="nameListBox more">{{ strName }}</p>
    </div>
    <div class="selectTreeBox">
      <el-input placeholder="搜索授权人姓名" v-model="filterText2" size="small"></el-input>
      <div class="treeContainer">
        <el-tree
          v-loading="loading"
          show-checkbox
          ref="authorizeTree"
          node-key="id"
          :data="alluser"
          :props="defaultProps2"
          @check-change="handleCheckChange"
          :filter-node-method="filterNode2"
        >
        </el-tree>
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-button type="primary" @click="confirm">确认</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'selectMemberTree',
  props: ['openAuth', 'currentReportUser'],
  data() {
    return {
      /* 报表授权 */
      userList: [],
      alluser: [],
      defaultProps2: {
        children: 'children',
        label: 'name',
      },
      filterText2: '',
      loading: false,
      strName: '',
    }
  },
  watch: {
    //监听搜索
    filterText2(val) {
      this.$refs.authorizeTree.filter(val)
    },
    openAuth: {
      deep: true,
      handler: function (val) {
        if (!val) {
          this.$refs.authorizeTree.setCheckedKeys([])
          this.userList = []
          this.filterText2 = ''
          this.strName = ''
          return
        }
        this.$refs.authorizeTree.setCheckedKeys(this.currentReportUser || [])
      },
    },
  },
  computed: {},
  created() {
    this.getMemberTree()
  },
  methods: {
    /* 获取username */
    getUserName() {
      let strNameList = ''
      this.userList.forEach((item, index) => {
        if (index === 0) {
          strNameList += item.username
          return
        }
        strNameList += '、' + item.username
      })
      this.strName = strNameList
    },
    /* 获取人员树 */
    getMemberTree() {
      this.loading = true
      this.$report
        .userList()
        .then((res) => {
          if (res.code === 200) {
            this.alluser = res.data.rows
            this.$nextTick(() => {
              this.$refs.authorizeTree.setCheckedKeys(
                this.currentReportUser || []
              )
            })
          } else {
            this.$message.error(res.code + '-' + res.msg)
          }
          this.loading = false
        })
        .catch((e) => {
          this.$message.error(e.toString())
        })
    },
    /* 授权树 */
    handleCheckChange(data) {
      if (!this.openAuth) return
      let index = this.userList.findIndex((item) => item.id === data.id)
      if (index > -1) {
        this.userList.splice(index, 1)
        return
      }
      this.userList.push(JSON.parse(JSON.stringify(data)))
      this.getUserName()
    },
    filterNode2(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    /* 确认选择, 返回人员id list */
    confirm() {
      let tempArr = []
      for (let item of this.userList) {
        tempArr.push(item.id)
      }
      console.log(tempArr)
      this.$emit('confirmAuthorize', tempArr)
    },
  },
}
</script>

<style lang="less">
.selectMemberTree {
  height: 500px;
  .nameBox {
    height: 30px;
    width: 100%;
    line-height: 30px;
    margin-bottom: 20px;
    .nameListBox {
      margin: 0;
      padding: 0 10px;
      height: 100%;
      flex: 1;
      border-radius: 4px;
      border: 1px solid gainsboro;
    }
  }
  .selectTreeBox {
    height: 400px;
    .el-tree {
      margin: 0;
    }
    .el-input {
      height: 30px !important;
      .el-input__inner {
        height: 30px !important;
      }
    }
    .treeContainer {
      height: 360px;
      overflow: auto;
    }
  }
}
</style>